<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <div>
        <el-card shadow="never">
          <el-button
            style="padding: 9px 0px; margin-bottom: 20px; width: 120px"
            type="warning"
            @click.native="add"
          >添加工作模式</el-button>
          <el-table
            :data="dataList"
            style="width: 100%; margin-bottom: 30px"
            stripe
          >
            <el-table-column
              label="工作模式编号"
              align="left"
              prop="id"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              label="工作模式"
              align="left"
              prop="name"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              label="类型"
              align="left"
              prop="workPatternTypeDesc"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              label="工作日期"
              align="left"
              prop="workDate"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              label="工作时间"
              align="left"
              min-width="140"
            >
              <template slot-scope="scope">
                <span>
                  {{
                    (
                      (scope.row.workEndMinute1 - scope.row.workStartMinute1) /
                      60
                    ).toFixed(2)
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="163"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="edit(scope.row.id)"
                >编辑</el-button>
                <el-button
                  type="text"
                  style="color: #e15536"
                  @click="del(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination pages fen">
            <el-pagination
              :current-page="Number(elp.page)"
              :total="Number(total)"
              :page-size="Number(elp.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="schange"
              @current-change="cchange"
            />
          </div>
        </el-card>
        <!-- 新增页面 -->
        <workMan
          :dialog-visible.sync="dialogVisible"
          :week="week"
          :week-l.sync="weekL"
          :title="title"
          :date="date"
          :flag="flag"
          @workHistoryList="workHistoryList"
        ></workMan>
      </div>
    </div>
  </div>
</template>

<script>
import workMan from './components/work-man.vue'
import {
  workHistoryList,
  workHistoryInfo,
  deleteWorkHistory

} from '@/api/transit'
// , workHistoryInfo
// updateWorkHistory
export default {
  components: {
    workMan
  },
  data() {
    return {
      // 关联城市枚举
      id: '',
      temp: {
        monday: '周一',
        tuesday: '周二',
        wednesday: '周三',
        thursday: '周四',
        friday: '周五',
        saturday: '周六',
        sunday: '周日'
      },
      flag: false,
      date: [new Date(2023, 6, 10, 9, 10), new Date(2023, 6, 10, 18, 10)],
      title: '新增工作模式',
      dataList: [],
      weekL: {
        week: [],
        id: null,
        restDayNum: null,
        workDayNum: null,
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        name: '',
        workStartMinute1: null,
        workEndMinute1: null,
        workPatternType: '1'
      },
      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      dialogVisible: false,
      total: null,
      elp: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.workHistoryList()
  },
  methods: {
    async workHistoryList() {
      const { data: res } = await workHistoryList(this.elp)
      this.dataList = res.items
      this.total = res.counts
    },
    // 每页显示信息条数
    schange(val) {
      console.log(val)
      this.elp.pageSize = val
      if (this.elp.page === 1) {
        this.workHistoryList(this.elp)
      }
    },
    // 进入某一页
    cchange(val) {
      this.elp.page = val
      this.workHistoryList()
    },
    add() {
      this.title = '新增工作模式'
      this.dialogVisible = true
      this.flag = true
      // this.type = 'add'
    },
    async edit(id) {
      this.title = '编辑工作模式'
      this.dialogVisible = true
      this.flag = false
      console.log(id)

      const { data } = await workHistoryInfo(id)
      console.log(data)
      this.weekL.name = data.name
      const arr = []

      for (const key in data) {
        if (data[key] === 1) {
          arr.push(key)
        }
      }
      console.log(arr)
      const tt = [
        'monday',
        'tuesday',
        'wednesday',
        'thursday',
        'friday',
        'saturday',
        'sunday'
      ]
      const str = arr.filter(item => tt.includes(item))
      const aa = str.map(item => this.temp[item])
      console.log(aa)
      this.weekL.week = aa
      console.log(this.weekL.week)
      this.weekL.id = data.id
      console.log(data)
      // console.log(data)

      this.workPatternType = String(data.workPatternType)
      this.id = data.id
      const h1 = data.workStartMinute1 / 60
      const h2 = data.workEndMinute1 / 60
      const f1 = data.workStartMinute1 / 70
      const f2 = data.workEndMinute1 / 72
      this.date = [new Date(2023, 6, 10, h1, f1), new Date(2023, 6, 10, h2, f2)]
      // console.log(data.workStartMinute1)
      // console.log(data.workEndMinute1)
      // this.workPatternType = String(res.workPatternType)
      // this.id = res.id
      // this.type = 'edit'
    },
    del(id) {
      this.$confirm('确定删除?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWorkHistory(id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.workHistoryList()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
/deep/ .pagination {
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  /deep/ .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    height: 40px;
  }
  /deep/ .el-tabs__item {
    font-size: 14px;
  }
  /deep/ .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e15536;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  /deep/ .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
/deep/ .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
/deep/ .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
/deep/ .fen {
  text-align: center;
}
/deep/ .tabs {
  color: black;
}

>>>.el-pager li.active{
 color: #e15536;
}
</style>
